<template>
    <div>
        <div class="table_wrap">
            <div class="breadcrumb_nav">
                <BreadCrumb></BreadCrumb>
            </div>
            <div class="allstuInfoAll_tittle">
                带头像的所有学生信息查询
            </div>

            <!-- 跳转到 后台分页  也就是真分页 -->
            <el-button type="info" @click="$router.push({
                name:'allInfoHeaderHou'
            })">学生信息 -- 后台分页</el-button>

            <div class="table_all_head">
                <el-table :data="tableData" style="width: 100%" height="500" @row-click="goDetail">
                    <el-table-column prop="stu_head_img" label="头像">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.stu_head_img"
                                :preview-src-list="srcList" @click="bigImage(scope.row.stu_head_img)">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stu_id" label="学号" width="100">
                    </el-table-column>
                    <el-table-column prop="stu_name" label="姓名" width="100">
                    </el-table-column>
                    <el-table-column prop="stu_sex" label="性别" width="100">
                    </el-table-column>
                    <el-table-column prop="stu_jg" label="籍贯">
                    </el-table-column>
                    <el-table-column prop="stu_date" label="出生日期" width="180">
                        <!-- 
                            注意：
                                1、scope 是插槽接收子组件绑定的数据，是个对象。
                                2、在 table-column 中 scope.row 拿到当前行的数据对象
                                3、scope.$index  拿到当前行的下标
                        -->
                        <!-- 在父组件中看不到子组件，使用插槽接收子组件中v-bind绑定暴露过来的数据 -->
                        <template slot-scope="scope">
                            <!-- $moment 是绑定在原型上的方法      设置显示时间的格式 -->
                            <p>{{ $moment(scope.row.stu_date).format('YYYY-MM-DD') }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stu_hobby" label="爱好" width="200px">
                    </el-table-column>
                    <el-table-column prop="stu_gbf" label="男或女朋友">
                    </el-table-column>
                </el-table>
                <!-- 设置分页器 -->
                <div class="page">
                    <el-pagination layout="prev, pager, next" :total="total" background :page-size="pageSize"
                        :current-page="currentPage" @current-change="currentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { req_all_info_head } from '@/api/stuInfo.js';
export default {
    data() {
        return {
            tableData: [],//分页器渲染用的数组
            resultAlldata: [],//接收ajax返回的所有数据
            srcList: [
                "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            ],
            //设置分页器
            total: 0,//设置返回数据的总条数
            pageSize: 5,//设置一页显示 5 条数据
            currentPage: 1,//设置当前页数
        }
    },
    async mounted() {
        let result = await req_all_info_head();
        // console.log(result);
        //接收ajax返回的所有的数据
        this.resultAlldata = result.data
        //设置数据总条数，从而自动产生页数
        this.total = result.data.length;
        //设置默认的分页显示的数据
        //默认 显示第一页数据
        //思路：当前页显示的数据 = （当前页数-1）*一页显示条数，当前页数*一页显示的条数
        this.tableData = result.data.slice(
            (this.currentPage - 1) * this.pageSize,
            this.currentPage * this.pageSize
        )
    },
    methods: {
        //展示大图
        bigImage(value) {
            console.log(value)
            this.srcList[0] = value;
        },
        //信息详情
        goDetail(row, column, event) {
            console.log(row, column, event);
            //row 是点击行的 所有数据 column 对象 上面有很多属性和方法 event 事件对象

            //分析  点击某一行 跳转到 详情页  ； 点击某行照片则是要放大照片 则要分情况看了
            //event.target.tagName 得到事件目标对象的标签  大写的
            if (event.target.tagName != 'IMG') {
                this.$router.push({
                    name: 'stuDetail',
                    query: {
                        //注意格式转换  先转成JSON字符串 
                        stuInfoDetail: JSON.stringify(row),
                    }
                })
            }
        },
        //分页显示
        currentChange(value) {
            console.log(value);
            this.tableData = this.resultAlldata.slice(
                (value - 1) * this.pageSize,
                value * this.pageSize
            )
        }
    }
}
</script>

<style lang="scss" scoped>
div {
    div {
        height: 30px;
    }

    .table_wrap {
        .breadcrumb_nav {
            height: 30px;
        }

        .allstuInfoAll_tittle {
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            height: 30px;
        }

        .table_all_head {
            margin: 10px 0;
        }

        .page {
            margin: 10px 0;
            display: flex;
            justify-content: center;
        }
    }
}
</style>